<template>
  <div v-waterMarker class="merak-card merak-container-has-search" curPageName="LabelFees">
    <SearchBar
      closePlan
      closeAdvanced
      :placeholder="$t('marking_labelFees.search_placeholder')"
      @search-event="data => (tableState.params!.key_words = data.search)"
    >
      <template #footer>
        <el-button v-auth="{ authArr: auth, key: 'add' }" type="primary" @click="addRef?.open">
          {{ $t("marking_labelFees.add_payment") }}
        </el-button>
      </template>
    </SearchBar>
    <div class="merak-table-wrapper">
      <MerakXTable ref="tableRef" v-bind="tableState" :queryColumns="handleQueryColumns" :queryData="handleQueryData">
        <template #custom_cell_button="{ column, row }">
          <span :style="{ color: (row[column.field] as string).startsWith('-') ? 'red' : 'inherit' }">
            {{ row[column.field] }}
          </span>
        </template>
        <template #custom_look="{ row }">
          <el-button type="primary" link @click="handleLink(row)">{{ $t("merak.detail") }}</el-button>
        </template>
      </MerakXTable>
    </div>
    <AddForm ref="addRef" @close="saved => saved && tableRef?.reloadData()" />
  </div>
</template>

<script setup lang="ts" name="LabelFees">
import { ref, reactive, onMounted } from "vue";

import { useRouter } from "vue-router";

import useLoading from "@/hooks/useLoading";

import { ElButton } from "element-plus";

import SearchBar from "@/components/SearchBar/index.vue";

import MerakXTable, { MerakXTableInstance, MerakXTableProps, MerakXTableColumn } from "@/components/MerakXTable";

import AddForm from "./components/AddForm.vue";

import { ResultEnum } from "@/enums/httpEnum";
import { UserAuthType, getUserAuth } from "@/api/modules/user";
import { Path, getTableColumns, getTableData } from "@/api/modules/table";

const router = useRouter();

const { queueId, queueLoading } = useLoading();

const tableRef = ref<MerakXTableInstance>();

const addRef = ref<InstanceType<typeof AddForm>>();

// 页面权限
const auth = ref<UserAuthType>();

// 表格属性
const tableState = reactive<MerakXTableProps>({
  columnsByStore: [],
  columnType: [{ type: "handle", slot: "custom_look" }],
  toolbar: ["refresh", "export"],
  params: {},
  rowKey: "supplier_id"
});

// 获取表头
const handleQueryColumns: MerakXTableProps["queryColumns"] = async () => {
  return getTableColumns(Path.markFees, queueId.value).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      tableState.columnsByStore = JSON.parse(JSON.stringify(data.columns));
      return {
        ...data,
        columns: [...(data.columns ?? [])].map(col => {
          switch (col.field) {
            case "qf_code":
              col.fixed = "left";
              break;
            case "supplier_id":
              col.fixed = "left";
              col.minWidth = 200;
              col.slots = { default: ({ row }) => row.supplier_name };
              break;
            case "total_balance_cny":
            case "total_balance_rub":
            case "total_balance_usd":
              col.slots = { default: "custom_cell_button" };
              break;
            default:
              break;
          }
          return { ...col };
        })
      };
    }
  });
};

// 获取列表数据
const handleQueryData: MerakXTableProps["queryData"] = async ({ page, from }) => {
  const params: Record<string, any> = {};
  if (!!page) {
    Object.assign(params, page);
  }
  if (!!from) {
    Object.assign(params, from);
  }
  return getTableData(Path.markFees, params, queueId.value).then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      return { ...data.table_data };
    }
  });
};

// 跳转明细
const handleLink = (row: Record<string, any>) => {
  const query: Record<string, any> = {
    id: row.supplier_id,
    name: row.supplier_name
    // typeName: column.field
  };
  router.push({ name: "LabelFeesDetail", query });
};

onMounted(() => {
  getUserAuth("LabelFees").then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      auth.value = data;
    }
  });
});
</script>

<style scoped lang="scss">
.merak-table-wrapper {
  :deep(.vxe-cell .el-button.is-link) {
    margin: 0;
    padding: 0;
    min-width: auto;
    border: none;
  }
}
</style>
